---
layout: examples
title: SUI Mobile Demo
---

<header class="bar bar-nav">
  <a class="button button-link button-nav pull-left back">
    <span class="icon icon-left"></span>
    返回
  </a>
  <h1 class="title">详情</h1>
</header>
<div class="content" id='detail-page'>
  <!-- 这里是页面内容区 -->
  <style>
    .list-block, .content-block {
      margin: 0.75rem 0;
    }
  </style>
  <div class="page-detail">
    <div class="swiper-container swiper-container-horizontal" data-space-between="10">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class='card-cover' src="//gd1.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class='card-cover' src="//gd3.alicdn.com/imgextra/i3/238126515/TB21mEfcFXXXXc5XXXXXXXXXXXX_!!238126515.jpg_640x640.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class='card-cover' src="//gd2.alicdn.com/imgextra/i2/238126515/TB2TpgmcFXXXXbwXXXXXXXXXXXX_!!238126515.jpg_640x640.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
    </div>
    <div class='content-block goods-card'>
      <h3>ROZENE春纯棉四件套 床上春夏 床单被套四件套全棉天丝四件套春夏</h3>
      <p><strong>￥888.00</strong> <del>￥1288.00</del></p>
      <div class="row text-center color-gray">
        <div class="col-25">卖家包邮</div>
        <div class="col-50">月销18762笔</div>
        <div class="col-25">浙江杭州</div>
      </div>
    </div>
    <div class="list-block media-list">
      <ul>
        <li>
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">选择颜色和尺码</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class='content-block'>
      <div class="buttons-row">
        <a href="#tab-detail" class="tab-link active button">商品</a>
        <a href="#tab-comments" class="tab-link button">评论(123)</a>
      </div>
      <div class="tabs">
        <div class="tab active" id='tab-detail'>
          <h3>真正适合裸睡的面料</h3>
          <p>只有当你接触到床的那一刻，才会被前所未有的柔软打动。天丝般的爽滑质感，完美的设计，漂亮的色彩搭配。</p>
          <p><img src="//img.alicdn.com/imgextra/i4/238126515/TB25x8rdXXXXXaWXXXXXXXXXXXX_!!238126515.jpg" alt="" style='width:100%'></p>
          <h3>活性色彩，我的正能量</h3>
          <p>活性印刷，生活不在一成不变，跟上时代的脚步。A版大花纹，古典大气，民族的就是最美。零压力的舒适感，让人完美享受美好的床上时光。</p>
          <p><img src="//img.alicdn.com/imgextra/i3/238126515/TB2ht8qdXXXXXbmXXXXXXXXXXXX_!!238126515.jpg" alt="" style='width:100%'></p>
        </div>
        <div class="tab" id='tab-comments'>
          <div class="list-block media-list">
            <ul>
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">张**三</div>
                      <div class="item-after">12/12 13:11</div>
                    </div>
                    <div class="item-text">聚划算买的，只要888，料子很舒服。</div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">Xi***ng</div>
                      <div class="item-after">12/12 13:11</div>
                    </div>
                    <div class="item-text">太喜欢了，做工精细，质量非常好。</div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">张**严</div>
                      <div class="item-after">12/12 13:11</div>
                    </div>
                    <div class="item-text">不好意思评价晚了，第三次买了，一如既往的好评</div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">张**三</div>
                      <div class="item-after">12/12 13:11</div>
                    </div>
                    <div class="item-text">聚划算买的，只要888，料子很舒服。</div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">Xi***ng</div>
                      <div class="item-after">12/12 13:11</div>
                    </div>
                    <div class="item-text">太喜欢了，做工精细，质量非常好。</div>
                  </div>
                </div>
              </li>
              <li>
                <div class="item-content">
                  <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>
                  <div class="item-inner">
                    <div class="item-title-row">
                      <div class="item-title">张**严</div>
                      <div class="item-after">12/12 13:11</div>
                    </div>
                    <div class="item-text">不好意思评价晚了，第三次买了，一如既往的好评</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
